<template>
  <div style="height: 100vh; width: 100vw; position: relative;" class="jigsaw">
    <!-- 四宫格拼图区域 -->
    <div class="target_area">
      <draggable
        v-for="(pie, index) in state.target" :key="index" class="target_item" :group="group.targetGroup[index]"
        :list="state.target[index]" ghost-class="ghost" chosen-class="chosenClass" animation="300" :move="onMove"
        item-key="id" @start="onStart" @end="onEnd"
      >
        <template #item="{ element }">
          <img v-if="element.pic" :src="cardBaseUrl + element.pic" alt="">
        </template>
      </draggable>
    </div>
    <!-- <img v-if="element.pic" :src="element.pic" alt=""> -->
    <!-- <img v-if="element.pic" :src="cardBaseUrl + element.pic" alt=""> -->

    <div class="library">
      <div class="title">
        拖动同扇面4张碎片以完成拼图
      </div>
      <div class="content">
        <!-- 待选图片区域 -->
        <draggable
          :group="group.sourceGroup" fallback-on-body="false" :sort="false" :list="state.source"
          class="source_area" ghost-class="ghost" chosen-class="chosenClass" animation="300" :move="onMove"
          item-key="id" @start="onStart" @end="onEnd"
        >
          <template #item="{ element }">
            <div class="source_item">
              <img class="jigsaw_piece" :src="cardBaseUrl + element.pic" alt="">
            </div>
          </template>
        </draggable>
      </div>
      <!-- <img class="jigsaw_piece" :src="cardBaseUrl + element.pic" alt=""> -->
      <!-- <img class="jigsaw_piece" :src="element.pic" alt=""> -->
    </div>
  </div>

  <GetCardTip ref="GetCardTipRef" />
</template>

<script setup>
import { onMounted, reactive } from 'vue'
import draggable from 'vuedraggable'
import GetCardTip from '@/components/getCardTip.vue'
import { pinTuPage } from '@/api/activities'

import { useUserStoreWidthOut } from '@/store/modules/user'

const cardBaseUrl = ref(import.meta.env.VITE_GLOB_IMG_URL)

const userStore = useUserStoreWidthOut()
// const userInfo = computed(() => userStore.getUserInfo)

const state = reactive({
  // 源
  source: [
  ],
  // 目标区域
  target: [[], [], [], []],
  // 暂存,拖拽开始时复制到这里
  memory: [

  ],
  card: [],
})
function onStart(e) {
  console.log(e)
}
const group = reactive({
  targetGroup: [
    {
      name: 'xx1',
      pull: true,
      // put: true,
      put: () => {
        return state.target[0].length === 0
      },
    },
    {
      name: 'xx1',
      pull: true,
      // put: true,
      put: () => {
        return state.target[1].length === 0
      },
    },
    {
      name: 'xx1',
      pull: true,
      // put: true,
      put: () => {
        return state.target[2].length === 0
      },
    },
    {
      name: 'xx1',
      pull: true,
      // put: true,
      put: () => {
        return state.target[3].length === 0
      },
    },
  ],
  sourceGroup: {
    name: 'xx1',
    pull: true,
    put: true,
  },
})

const GetCardTipRef = ref()
function openGetCardTip(res) {
  GetCardTipRef.value.open(res)
}

function onMove() {
  // console.log("拖拽", e);
}
function onEnd() {
  console.log('结束拖拽', state.target, state.source)
  let commonGroupId = ''
  const temp_target = []
  let order = true
  let times = 0
  // state.target.map((item) => {
  //   if (item.length > 0) {
  //     temp_target.push(item[0])
  //   }
  // })
  for (let i = 0; i < state.target.length; i++) {
    const item = state.target[i]
    if (item.length > 0) {
      temp_target.push(item[0])
    }
  }
  commonGroupId = temp_target[0].groupId
  console.log('temp_target', temp_target)
  console.log('commonGroupId', commonGroupId)
  if (temp_target.length === 4) {
    for (let i = 0; i < temp_target.length; i++) {
      const item = temp_target[i]
      if (i === 0) {
        order = true
      }
      if (i > 0) {
        if (temp_target[i - 1].id + 1 !== item.id) {
          order = false
        }
      }
      if (item.groupId === commonGroupId) {
        times += 1
      }
    }
  }
  console.log('times', times)
  console.log('order', order)
  console.log('拼错了?', state.target, times, order)
  if (times === 4 && order) {
    // openGetCardTip('10积分+扇面卡片')
    const group = state.card.filter((item) => {
      return item.id === commonGroupId
    })
    if (group.length > 0) {
      openGetCardTip({ type: 'activity', cardId: group[0].id, point: '10', cardPic: group[0].pic, harvestType: ['积分', '卡片'], typeDesc: group[0].id, message: '恭喜获得了 卡片扇子 和 10积分', cardGetTip: 'auto', sorceGetTip: 'auto' })
    }
    console.log('group', group)
  }
  else if (temp_target.length === 4 && (times < 4 || !order)) {
    for (let i = 0; i < state.target.length; i++) {
      const item = state.target[i]
      if (item && item.length > 0) {
        state.source.push(item[0])
      }
    }
  }
  if (temp_target.length === 4) {
    setTimeout(() => {
      state.target = [[], [], [], []]
    }, 500)
  }
}

async function getProblem() {
  const res = await pinTuPage({ size: 100, page: 1 })
  console.log('res', res)

  if (res.code === 200) {
    // state.problem = res.data.records
    state.source = res.data.records.filter((item) => {
      return item.groupId !== null
    })
    // state.source[0].pic = "https://img1.baidu.com/it/u=1653751609,236581088&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500"
    // state.source[1].pic = "https://img2.baidu.com/it/u=2961748509,235462167&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500"
    // state.source[2].pic = "https://img0.baidu.com/it/u=1026026620,1467286302&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500"
    // state.source[3].pic = "https://img1.baidu.com/it/u=1023988870,1943056935&fm=253&fmt=auto&app=120&f=JPEG?w=507&h=500"
    state.card = res.data.records.filter((item) => {
      return item.groupId === null
    })
  }
}
onMounted(async () => {
  await userStore.GetUserInfo()
  await getProblem()
})
</script>

<style lang="scss">
.jigsaw {
  background: url('https://jwc-static.jdwxk.com/imgs/activities/jigsaw_bg.png');
  background-size: cover;
  background-repeat: no-repeat;

  div {
    box-sizing: border-box;
  }

  .target_area {
    border: 1px solid #b67565;
    border-radius: 2px;
    background: white;
    width: 100vw;
    height: 100vw;
    display: flex;
    flex-wrap: wrap;

    img {
      width: 100%;
      height: 100%;
    }

    & > div.target_item {
      width: calc(50vw - 2px);
      height: calc(50vw - 2px);
    }

    & > .target_item:nth-child(1) {
      border-right: 1px dashed #b67565;
      border-bottom: 1px dashed #b67565;
    }

    & > .target_item:nth-child(2) {
      border-bottom: 1px dashed #b67565;
    }

    & > .target_item:nth-child(3) {
      border-right: 1px dashed #b67565;
    }
  }

  .library {
    margin-top: 12.5px;

    .title {
      background: url('https://jwc-static.jdwxk.com/imgs/activities/jigsaw_source_title.png');
      width: 335px;
      height: 38px;
      background-size: contain;
      background-repeat: no-repeat;
      color: #663c2a;
      font-size: 15px;
      font-weight: 700;
      line-height: 38px;
      margin-left: 50%;
      text-align: center;
      transform: translateX(-50%);
      z-index: 2;
    }

    .content {
      margin-top: -19px;
      width: 100vw;
      height: calc(100vh - 100vw - 12.5px - 38px + 19px);
      background: #f2e8ce;
      border-radius: 8px;
      border: 2.5px solid #b67565;
      overflow-y: scroll;
    }

    .source_area {
      display: flex;
      flex-wrap: wrap;
      padding: 33px 20px 20px 20px;
      gap: 8px;
    }

    .source_item {
      border-radius: 6px;
      overflow: hidden;
      width: calc((100vw - 5px - 40px - 24px) / 4);
      height: calc((100vw - 5px - 40px - 24px) / 4);
      flex-shrink: 0;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.jigsaw_puzzle {
  img {
    width: 77px;
    height: 77px;
    border-radius: 6px;
  }
}

.jigsaw_piece {
  width: 77px;
  height: 77px;
}
</style>
